<!--
 * @Descripttion: 按品目设置
 * @version:
 * @Author: 赵致喜
 * @Date: 2020-10-16 10:52:57
 * @LastEditors: 赵致喜
 * @LastEditTime: 2020-10-29 08:40:21
-->
<template>
  <div>
    <el-form ref="form" label-width="80px" label-suffix=":" :inline="true">
      <el-row>
        <el-col :span="6">
          <el-form-item label="供应商">
            <el-select v-model="supplierList"
                       multiple
                       collapse-tags
                       filterable
                       placeholder="请选择供应商"
                       @change="changeSupplier">
              <el-option
                v-for="item in suppliers"
                :key="item.supplierId"
                :label="item.supplierName"
                :value="item.supplierId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="16">
          <el-form-item>
            <el-tooltip class="item" effect="dark"
                        content="温馨提示：更新商品的自营价会遍历全部商品，随着商品数量的增多这个过程时间可能会很长，请耐心等待
                    在此期间请勿进行与商品相关操作，可能会造成数据错误或修改无效" placement="top-start">
              <el-button type="primary" @click="updataGoodsPrice">刷新价格</el-button>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="custom-tree-container">
      <el-card class="box-card">
        <p style="color:#f00">注意：此处填写为百分比，只需填写数字即可。
          <el-button type="warning"
                     size="mini"
                     @click="resetHandle">重置
          </el-button>
          <el-button type="info"
                     size="mini"
                     @click="syncHandle">同步数据
          </el-button>
          <el-button type="primary"
                     size="mini"
                     @click="submitHandle">提交
          </el-button>
        </p>
<!--        :default-expanded-keys='childKeys'-->
        <el-tree :data="treeData"
                 :props="defaultProps"
                 :accordion="true"
                 :load="loadNode"
                 lazy
                 node-key="id"
                 ref="listTree"
                 :expand-on-click-node="false">
          <span class="custom-tree-node"
                slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="inputBox">
              <el-input-number v-if="data.show"
                               v-model="data.priceFloat"
                               placeholder="请输入内容"
                               controls-position="right"
                               @change="inputChange(node, data)"
                               :min="0"
                               :max="100000"
                               size="mini">
              </el-input-number>
            </span>
          </span>
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  querySelfOperatedPriceTrees,
  updateSelfOperatedPrice,
  resetSelfOperatedPrice,
  suppliersForSelfOperatedPrice,
  suppliersUseSelfOperatedPrice,
  setSuppliersUseSelfOperatedPrice,
  allItemPrice
} from '@/api/admin.api'
export default {
  name: 'item-set',
  components: {
  },
  props: {
  },
  data () {
    return {
      // 品目树数据
      treeData: [],
      // 同步数据状态 0未同步 1已同步
      syncType: 0,
      // 树配置项
      defaultProps: {
        children: 'children',
        label: 'label',
        check: false,
        isLeaf: 'leaf',
        level: 1,
        id: 'id'
      },
      // 展开子级keys
      childKeys: [],
      // 供应商
      suppliers:[],
      supplierList:[]
    }
  },
  watch: {},
  computed: {

  },
  methods: {
    // 供应商改变
    changeSupplier () {
      const {supplierList} = this
      setSuppliersUseSelfOperatedPrice(supplierList)
      //   .then((res) => {
      //   this.$message({
      //     message: '修改成功',
      //     type: 'success'
      //   })
      // })
    },
    // 查询供应商列表-自营价
    getSuppliersForSelfOperatedPrice() {
      suppliersForSelfOperatedPrice().then((res)=>{
        this.suppliers = res
      })
    },
    // 查询自营价适用供应商
    getSuppliersUseSelfOperatedPrice() {
      suppliersUseSelfOperatedPrice().then((res) => {
        this.supplierList = res
      })
    },
    // 获取组织树
    getOrgTreeEvent () {
      querySelfOperatedPriceTrees().then((res) => {
        const newArr = []
        res.map(item => {
          const obj = {}
          obj.label = item.category_name
          obj.id = item.id
          obj.level = item.category_level
          obj.priceFloat = ''
          obj.show = false
          newArr.push(obj)
        })
        this.treeData = newArr
      })
    },

    // 懒加载左侧tree
    loadNode (node, resolve) {
      this.syncType = 1
      const childArr = []
      if (node.data.level === 1) {
        node.data.show = true
        querySelfOperatedPriceTrees({ categoryId: node.data.id }).then((res) => {
          res[0].children.map(item => {
            const level2 = {}
            level2.label = item.category_name
            level2.id = item.id
            level2.level = item.category_level
            level2.priceFloat = ''
            level2.show = true
            level2.children = []
            item.children.map(item1 => {
              const level3 = {}
              level3.label = item1.category_name
              level3.id = item1.id
              level3.leaf = true
              level3.show = true
              level3.level = item1.category_level
              level3.priceFloat = item1.price_float
              level2.children.push(level3)
            })
            childArr.push(level2)
            return resolve(childArr)
          })
          node.childNodes.map(item => {
            this.childKeys.push(item.data.id)
          })
        })
      }
      if (node.data.level === 2) {
        return resolve(node.data.children)
      }
    },
    // 父级文本编辑时向下传递所有子级
    inputChange (node, data) {
      this.syncType = 0

      // node.childNodes.map(item => {
      //   item.data.priceFloat = data.priceFloat
      //   item.childNodes.map(item1 => {
      //     item1.data.priceFloat = data.priceFloat
      //   })
      // })

      // 按屏幕设置价格-修改根节点价格同步未展开子项的价格
      if (data.level === 1) {
        node.childNodes.map(item => {
          item.data.priceFloat = data.priceFloat
          item.data.children.map(item1 => {
            item1.priceFloat = data.priceFloat
          })
        })
      } else if (data.level === 2) {
        node.data.children.map(item => {
          item.priceFloat = data.priceFloat
        })
      }
    },
    // 同步数据更改状态
    syncHandle () {
      this.syncType = 1
    },
    // 提交数据
    submitHandle () {
      const {supplierList} = this
      if (supplierList.length <= 0) {
        this.$message({
          message: '请选择供应商',
          type: 'warning'
        })
        return
      }
      if (this.syncType === 1) {
        const list = []
        this.treeData.map(item => {
          const nodes = this.$refs['listTree'].getNode(item.id)
          nodes.childNodes.map(item1 => {
            item1.data.children.map(item2 => {
              const listObj = {}
              listObj.id = item2.id
              listObj.priceFloat = item2.priceFloat
              list.push(listObj)
            })
          })
        })

        updateSelfOperatedPrice(list).then(() => {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        })
      } else {
        this.$alert('需要同步数据后才可以提交', '提示', {
          confirmButtonText: '确定',
          showClose: false
        })
      }
    },
    // 重置数据
    resetHandle () {
      this.$confirm('重置后数据将恢复初始化状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetSelfOperatedPrice().then(() => {
          this.$message({
            message: '重置成功',
            type: 'success'
          })
          this.getOrgTreeEvent()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 更新商品价格
    updataGoodsPrice () {
      allItemPrice().then(()=>{

      })
    }

  },
  created () { },
  mounted () {
    // 查询供应商列表-自营价
    this.getSuppliersForSelfOperatedPrice()
    // 查询自营价适用供应商
    this.getSuppliersUseSelfOperatedPrice()
    this.getOrgTreeEvent()
  }
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: contents;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
::v-deep .el-tree-node__content {
  height: 36px !important;
}
.inputBox {
  .el-input-number {
    margin-left: 10px;
  }
}
</style>
<style lang="css">

  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background: #FFFFFF;
    max-width: 400px;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    padding: 12px;
    color: black;
    line-height: 180%;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
    bottom: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-color: #FFFFFF;
    border-bottom-width: 0;
    -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
  }
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
</style>
